import { Table } from '@arco-design/web-react';


function RoleTree({state, setState}){
    const columns = [
        {
          title: '功能',
          dataIndex: 'resName',
          key: 'resName'
        },
        {
          title: '已选模块',
          dataIndex: 'resKey',
          key: 'resKey',
          render: (col, record, index)=>{
            return( record.buttons && (record.buttons.length > 0) ? 
            record.buttons.map(btn=>{
                return <span>{btn.resName} </span>
            }) : null )
          }
        }
    ];
    return(
    <div style={{boxSizing: 'border-box', padding: '10px'}}>
        <Table 
          loading = {state.roleTree.loading}
          indentSize={60} 
          columns={columns} 
          data={state.roleTree.data}
          borderCell='true'
          pagination={false}/>
    </div>)
}

export default RoleTree